
<template>
    <div>
        <!-- <img src="../assets/imgs/R.png"/> -->
        <canvas id="canvas"></canvas>
    </div>
</template>
<script>
import MessageBox from '../components/common/srMessageBox.vue'

export default {
    name: 'T7',
    data() {
        return {
            timerId: null,
            canvas: null,
            ctx: null,
            clicks: [],
            points: [],
            colors: [
                '255, 165, 2',
                '255, 99, 72',
                '255, 71, 87',
                '46, 213, 115',
                '30, 114, 255',
                '55, 66, 250',
            ],
            live: 50,
        }
    },
    components: {

    },
    computed: {

    },

    mounted() {
        this.canvas = document.getElementById('canvas')
        this.ctx = this.canvas.getContext('2d')
        this.canvas.width = window.innerWidth
        this.canvas.height = window.innerHeight
        let aside = document.getElementsByTagName('aside')[0].clientWidth
        this.canvas.addEventListener('mousemove', e => {
            for (let i = 0; i < 15; i++) {
                this.points.push({
                    sx: e.x - aside,
                    sy: e.y - 84,
                    vx: 0.5 - Math.random(),
                    vy: 0.5 - Math.random(),
                    life: this.live,
                    color: this.colors[Math.floor((Math.random() * this.colors.length))],
                    size: Math.random() * 5,
                })
            }
        })
        this.canvas.addEventListener('click', e => {
            for (let i = 0; i < 100; i++) {
                this.clicks.push({
                    sx: e.x - aside,
                    sy: e.y - 84,
                    vx: 0.5 - Math.random(),
                    vy: 0.5 - Math.random(),
                    life: this.live,
                    color: this.colors[Math.floor((Math.random() * this.colors.length))],
                    size: Math.random() * 5,
                })
            }
        })
        this.timerId = setInterval(() => this.draw(), 20)
    },

    methods: {
        draw() {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
            for (let i = 0; i < this.points.length; i++) {
                let point = this.points[i]
                this.ctx.beginPath()
                this.ctx.arc(point.sx, point.sy, point.size, 0, Math.PI * 2)
                this.ctx.fillStyle = `rgba(${point.color}, ${point.life / this.live})`
                this.ctx.fill()
                point.life--
                if (point.life <= 0) {
                    this.points.splice(i, 1)
                }
                point.sx += point.vx * 3
                point.sy += point.vy * 3
                point.vy += 0.03
            }
            for (let i = 0; i < this.clicks.length; i++) {
                let click = this.clicks[i]
                this.ctx.beginPath()
                // this.ctx.arc(click.sx, click.sy, click.size, 0, Math.PI * 2)
                this.ctx.fillStyle = `rgba(${click.color}, ${click.life / this.live})`
                this.ctx.fillRect(click.sx, click.sy, 3, 3)
                click.life--
                if (click.life <= 0) {
                    this.clicks.splice(i, 1)
                }
                click.sx += click.vx * 10
                click.sy += click.vy * 10
                click.vy += 0.02
            }
        },
    },
    destroyed() {
        clearInterval(this.timeId)
    },
}
</script>